<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>常见 loader 和 plugin 有哪些？二者的区别是什么？</title><style>
/* cspell:disable-file */
/* webkit printing magic: print all background colors */
html {
	-webkit-print-color-adjust: exact;
}
* {
	box-sizing: border-box;
	-webkit-print-color-adjust: exact;
}

html,
body {
	margin: 0;
	padding: 0;
}
@media only screen {
	body {
		margin: 2em auto;
		max-width: 900px;
		color: rgb(55, 53, 47);
	}
}

body {
	line-height: 1.5;
	white-space: pre-wrap;
}

a,
a.visited {
	color: inherit;
	text-decoration: underline;
}

.pdf-relative-link-path {
	font-size: 80%;
	color: #444;
}

h1,
h2,
h3 {
	letter-spacing: -0.01em;
	line-height: 1.2;
	font-weight: 600;
	margin-bottom: 0;
}

.page-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0.75em;
}

h1 {
	font-size: 1.875rem;
	margin-top: 1.875rem;
}

h2 {
	font-size: 1.5rem;
	margin-top: 1.5rem;
}

h3 {
	font-size: 1.25rem;
	margin-top: 1.25rem;
}

.source {
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 1.5em;
	word-break: break-all;
}

.callout {
	border-radius: 3px;
	padding: 1rem;
}

figure {
	margin: 1.25em 0;
	page-break-inside: avoid;
}

figcaption {
	opacity: 0.5;
	font-size: 85%;
	margin-top: 0.5em;
}

mark {
	background-color: transparent;
}

.indented {
	padding-left: 1.5em;
}

hr {
	background: transparent;
	display: block;
	width: 100%;
	height: 1px;
	visibility: visible;
	border: none;
	border-bottom: 1px solid rgba(55, 53, 47, 0.09);
}

img {
	max-width: 100%;
}

@media only print {
	img {
		max-height: 100vh;
		object-fit: contain;
	}
}

@page {
	margin: 1in;
}

.collection-content {
	font-size: 0.875rem;
}

.column-list {
	display: flex;
	justify-content: space-between;
}

.column {
	padding: 0 1em;
}

.column:first-child {
	padding-left: 0;
}

.column:last-child {
	padding-right: 0;
}

.table_of_contents-item {
	display: block;
	font-size: 0.875rem;
	line-height: 1.3;
	padding: 0.125rem;
}

.table_of_contents-indent-1 {
	margin-left: 1.5rem;
}

.table_of_contents-indent-2 {
	margin-left: 3rem;
}

.table_of_contents-indent-3 {
	margin-left: 4.5rem;
}

.table_of_contents-link {
	text-decoration: none;
	opacity: 0.7;
	border-bottom: 1px solid rgba(55, 53, 47, 0.18);
}

table,
th,
td {
	border: 1px solid rgba(55, 53, 47, 0.09);
	border-collapse: collapse;
}

table {
	border-left: none;
	border-right: none;
}

th,
td {
	font-weight: normal;
	padding: 0.25em 0.5em;
	line-height: 1.5;
	min-height: 1.5em;
	text-align: left;
}

th {
	color: rgba(55, 53, 47, 0.6);
}

ol,
ul {
	margin: 0;
	margin-block-start: 0.6em;
	margin-block-end: 0.6em;
}

li > ol:first-child,
li > ul:first-child {
	margin-block-start: 0.6em;
}

ul > li {
	list-style: disc;
}

ul.to-do-list {
	text-indent: -1.7em;
}

ul.to-do-list > li {
	list-style: none;
}

.to-do-children-checked {
	text-decoration: line-through;
	opacity: 0.375;
}

ul.toggle > li {
	list-style: none;
}

ul {
	padding-inline-start: 1.7em;
}

ul > li {
	padding-left: 0.1em;
}

ol {
	padding-inline-start: 1.6em;
}

ol > li {
	padding-left: 0.2em;
}

.mono ol {
	padding-inline-start: 2em;
}

.mono ol > li {
	text-indent: -0.4em;
}

.toggle {
	padding-inline-start: 0em;
	list-style-type: none;
}

/* Indent toggle children */
.toggle > li > details {
	padding-left: 1.7em;
}

.toggle > li > details > summary {
	margin-left: -1.1em;
}

.selected-value {
	display: inline-block;
	padding: 0 0.5em;
	background: rgba(206, 205, 202, 0.5);
	border-radius: 3px;
	margin-right: 0.5em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	white-space: nowrap;
}

.collection-title {
	display: inline-block;
	margin-right: 1em;
}

.simple-table {
	margin-top: 1em;
	font-size: 0.875rem;
	empty-cells: show;
}
.simple-table td {
	height: 29px;
	min-width: 120px;
}

.simple-table th {
	height: 29px;
	min-width: 120px;
}

.simple-table-header-color {
	background: rgb(247, 246, 243);
	color: black;
}
.simple-table-header {
	font-weight: 500;
}

time {
	opacity: 0.5;
}

.icon {
	display: inline-block;
	max-width: 1.2em;
	max-height: 1.2em;
	text-decoration: none;
	vertical-align: text-bottom;
	margin-right: 0.5em;
}

img.icon {
	border-radius: 3px;
}

.user-icon {
	width: 1.5em;
	height: 1.5em;
	border-radius: 100%;
	margin-right: 0.5rem;
}

.user-icon-inner {
	font-size: 0.8em;
}

.text-icon {
	border: 1px solid #000;
	text-align: center;
}

.page-cover-image {
	display: block;
	object-fit: cover;
	width: 100%;
	max-height: 30vh;
}

.page-header-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.page-header-icon-with-cover {
	margin-top: -0.72em;
	margin-left: 0.07em;
}

.page-header-icon img {
	border-radius: 3px;
}

.link-to-page {
	margin: 1em 0;
	padding: 0;
	border: none;
	font-weight: 500;
}

p > .user {
	opacity: 0.5;
}

td > .user,
td > time {
	white-space: nowrap;
}

input[type="checkbox"] {
	transform: scale(1.5);
	margin-right: 0.6em;
	vertical-align: middle;
}

p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.image {
	border: none;
	margin: 1.5em 0;
	padding: 0;
	border-radius: 0;
	text-align: center;
}

.code,
code {
	background: rgba(135, 131, 120, 0.15);
	border-radius: 3px;
	padding: 0.2em 0.4em;
	border-radius: 3px;
	font-size: 85%;
	tab-size: 2;
}

code {
	color: #eb5757;
}

.code {
	padding: 1.5em 1em;
}

.code-wrap {
	white-space: pre-wrap;
	word-break: break-all;
}

.code > code {
	background: none;
	padding: 0;
	font-size: 100%;
	color: inherit;
}

blockquote {
	font-size: 1.25em;
	margin: 1em 0;
	padding-left: 1em;
	border-left: 3px solid rgb(55, 53, 47);
}

.bookmark {
	text-decoration: none;
	max-height: 8em;
	padding: 0;
	display: flex;
	width: 100%;
	align-items: stretch;
}

.bookmark-title {
	font-size: 0.85em;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 1.75em;
	white-space: nowrap;
}

.bookmark-text {
	display: flex;
	flex-direction: column;
}

.bookmark-info {
	flex: 4 1 180px;
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.bookmark-image {
	width: 33%;
	flex: 1 1 180px;
	display: block;
	position: relative;
	object-fit: cover;
	border-radius: 1px;
}

.bookmark-description {
	color: rgba(55, 53, 47, 0.6);
	font-size: 0.75em;
	overflow: hidden;
	max-height: 4.5em;
	word-break: break-word;
}

.bookmark-href {
	font-size: 0.75em;
	margin-top: 0.25em;
}

.sans { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; }
.code { font-family: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace; }
.serif { font-family: Lyon-Text, Georgia, ui-serif, serif; }
.mono { font-family: iawriter-mono, Nitti, Menlo, Courier, monospace; }
.pdf .sans { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK JP'; }
.pdf:lang(zh-CN) .sans { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK SC'; }
.pdf:lang(zh-TW) .sans { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK TC'; }
.pdf:lang(ko-KR) .sans { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK KR'; }
.pdf .code { font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK JP'; }
.pdf:lang(zh-CN) .code { font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC'; }
.pdf:lang(zh-TW) .code { font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK TC'; }
.pdf:lang(ko-KR) .code { font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK KR'; }
.pdf .serif { font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK JP'; }
.pdf:lang(zh-CN) .serif { font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK SC'; }
.pdf:lang(zh-TW) .serif { font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK TC'; }
.pdf:lang(ko-KR) .serif { font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK KR'; }
.pdf .mono { font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK JP'; }
.pdf:lang(zh-CN) .mono { font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC'; }
.pdf:lang(zh-TW) .mono { font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK TC'; }
.pdf:lang(ko-KR) .mono { font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK KR'; }
.highlight-default {
	color: rgba(55, 53, 47, 1);
}
.highlight-gray {
	color: rgba(120, 119, 116, 1);
	fill: rgba(120, 119, 116, 1);
}
.highlight-brown {
	color: rgba(159, 107, 83, 1);
	fill: rgba(159, 107, 83, 1);
}
.highlight-orange {
	color: rgba(217, 115, 13, 1);
	fill: rgba(217, 115, 13, 1);
}
.highlight-yellow {
	color: rgba(203, 145, 47, 1);
	fill: rgba(203, 145, 47, 1);
}
.highlight-teal {
	color: rgba(68, 131, 97, 1);
	fill: rgba(68, 131, 97, 1);
}
.highlight-blue {
	color: rgba(51, 126, 169, 1);
	fill: rgba(51, 126, 169, 1);
}
.highlight-purple {
	color: rgba(144, 101, 176, 1);
	fill: rgba(144, 101, 176, 1);
}
.highlight-pink {
	color: rgba(193, 76, 138, 1);
	fill: rgba(193, 76, 138, 1);
}
.highlight-red {
	color: rgba(212, 76, 71, 1);
	fill: rgba(212, 76, 71, 1);
}
.highlight-gray_background {
	background: rgba(241, 241, 239, 1);
}
.highlight-brown_background {
	background: rgba(244, 238, 238, 1);
}
.highlight-orange_background {
	background: rgba(251, 236, 221, 1);
}
.highlight-yellow_background {
	background: rgba(251, 243, 219, 1);
}
.highlight-teal_background {
	background: rgba(237, 243, 236, 1);
}
.highlight-blue_background {
	background: rgba(231, 243, 248, 1);
}
.highlight-purple_background {
	background: rgba(244, 240, 247, 0.8);
}
.highlight-pink_background {
	background: rgba(249, 238, 243, 0.8);
}
.highlight-red_background {
	background: rgba(253, 235, 236, 1);
}
.block-color-default {
	color: inherit;
	fill: inherit;
}
.block-color-gray {
	color: rgba(120, 119, 116, 1);
	fill: rgba(120, 119, 116, 1);
}
.block-color-brown {
	color: rgba(159, 107, 83, 1);
	fill: rgba(159, 107, 83, 1);
}
.block-color-orange {
	color: rgba(217, 115, 13, 1);
	fill: rgba(217, 115, 13, 1);
}
.block-color-yellow {
	color: rgba(203, 145, 47, 1);
	fill: rgba(203, 145, 47, 1);
}
.block-color-teal {
	color: rgba(68, 131, 97, 1);
	fill: rgba(68, 131, 97, 1);
}
.block-color-blue {
	color: rgba(51, 126, 169, 1);
	fill: rgba(51, 126, 169, 1);
}
.block-color-purple {
	color: rgba(144, 101, 176, 1);
	fill: rgba(144, 101, 176, 1);
}
.block-color-pink {
	color: rgba(193, 76, 138, 1);
	fill: rgba(193, 76, 138, 1);
}
.block-color-red {
	color: rgba(212, 76, 71, 1);
	fill: rgba(212, 76, 71, 1);
}
.block-color-gray_background {
	background: rgba(241, 241, 239, 1);
}
.block-color-brown_background {
	background: rgba(244, 238, 238, 1);
}
.block-color-orange_background {
	background: rgba(251, 236, 221, 1);
}
.block-color-yellow_background {
	background: rgba(251, 243, 219, 1);
}
.block-color-teal_background {
	background: rgba(237, 243, 236, 1);
}
.block-color-blue_background {
	background: rgba(231, 243, 248, 1);
}
.block-color-purple_background {
	background: rgba(244, 240, 247, 0.8);
}
.block-color-pink_background {
	background: rgba(249, 238, 243, 0.8);
}
.block-color-red_background {
	background: rgba(253, 235, 236, 1);
}
.select-value-color-pink { background-color: rgba(245, 224, 233, 1); }
.select-value-color-purple { background-color: rgba(232, 222, 238, 1); }
.select-value-color-green { background-color: rgba(219, 237, 219, 1); }
.select-value-color-gray { background-color: rgba(227, 226, 224, 1); }
.select-value-color-opaquegray { background-color: rgba(255, 255, 255, 0.0375); }
.select-value-color-orange { background-color: rgba(250, 222, 201, 1); }
.select-value-color-brown { background-color: rgba(238, 224, 218, 1); }
.select-value-color-red { background-color: rgba(255, 226, 221, 1); }
.select-value-color-yellow { background-color: rgba(253, 236, 200, 1); }
.select-value-color-blue { background-color: rgba(211, 229, 239, 1); }

.checkbox {
	display: inline-flex;
	vertical-align: text-bottom;
	width: 16;
	height: 16;
	background-size: 16px;
	margin-left: 2px;
	margin-right: 5px;
}

.checkbox-on {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%2358A9D7%22%2F%3E%0A%3Cpath%20d%3D%22M6.71429%2012.2852L14%204.9995L12.7143%203.71436L6.71429%209.71378L3.28571%206.2831L2%207.57092L6.71429%2012.2852Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
}

.checkbox-off {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%220.75%22%20y%3D%220.75%22%20width%3D%2214.5%22%20height%3D%2214.5%22%20fill%3D%22white%22%20stroke%3D%22%2336352F%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");
}
	
</style></head><body><article id="ff8ba818-5453-4223-a3be-7e3b0f9d9323" class="page sans"><header><div class="page-header-icon undefined"><span class="icon">📦</span></div><h1 class="page-title">常见 loader 和 plugin 有哪些？二者的区别是什么？</h1></header><div class="page-body"><h3 id="0778c2a0-1252-4b28-90e0-bc4f01179784" class="">常见 loader </h3><p id="a0590e8f-3180-4112-b0c0-32c240ab956a" class="">在 webpack 文档里写了：</p><figure id="735a3b5c-67d9-4ba5-93e4-f7b3ca9e3df7"><a href="https://webpack.js.org/loaders/" class="bookmark source"><div class="bookmark-info"><div class="bookmark-text"><div class="bookmark-title">Loaders | webpack</div><div class="bookmark-description">Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js. Loaders are activated by using loadername! prefixes in require() statements, or are automatically applied via regex from your webpack configuration - see configuration.</div></div><div class="bookmark-href"><img src="https://webpack.js.org/icon_512x512.png" class="icon bookmark-icon"/>https://webpack.js.org/loaders/</div></div><img src="https://webpack.js.org/icon-pwa-512x512.d3dae4189855b3a72ff9.png" class="bookmark-image"/></a></figure><p id="f9970e52-ba81-44bb-bd28-40af20f776af" class="">你可以记住：</p><ol type="1" id="486e8202-3ad5-4e7b-a76b-67e6e5bbac1d" class="numbered-list" start="1"><li><code>babel-loader</code> 把 JS/TS 变成  JS</li></ol><ol type="1" id="71498ad3-173c-4eb0-a075-7d21eb9eee65" class="numbered-list" start="2"><li><code>ts-loader</code> 把 TS 变成 JS，<strong>并提示类型错误</strong></li></ol><ol type="1" id="e6628af7-ef20-461c-8b7b-5121b4141864" class="numbered-list" start="3"><li><code>markdown-loader</code> 把 markdown 变成 html</li></ol><ol type="1" id="a81c3734-9375-44f2-87b9-b1f141fbe7af" class="numbered-list" start="4"><li><code>html-loader</code> 把 html 变成 JS 字符串</li></ol><ol type="1" id="81d78625-ceee-4202-b89a-12fd1690f7ca" class="numbered-list" start="5"><li><code>sass-loader</code> 把 SASS/SCSS 变成 CSS</li></ol><ol type="1" id="6198883f-6674-4f47-b673-58e83980eae6" class="numbered-list" start="6"><li><code>css-loader</code> 把 CSS 变成 JS 字符串</li></ol><ol type="1" id="f4e9f82b-3afc-4f94-92b3-6535abeca568" class="numbered-list" start="7"><li><code>style-loader</code> 把 JS 字符串变成 style 标签</li></ol><ol type="1" id="72b0674e-3414-4bff-a36d-617b3e5a63d1" class="numbered-list" start="8"><li><code>postcss-loader</code> 把 CSS 变成更优化的 CSS</li></ol><ol type="1" id="9f0e0b05-e452-48af-8117-4a0da2ee7aad" class="numbered-list" start="9"><li><code>vue-loader</code> 把单文件组件（SFC）变成 JS 模块</li></ol><ol type="1" id="c8a8d486-6104-4dc6-9733-fbd8b467c72f" class="numbered-list" start="10"><li><code>thread-loader</code> 用于多进程打包</li></ol><h3 id="ec34bd45-6797-42e3-8734-c9c912adc4ff" class="">常见 plugin</h3><p id="79ab6404-d4dd-46b7-8d34-1884d016fcc9" class="">也在 webpack 文档里写了：</p><figure id="9dbd57a7-843f-4ebc-97a7-41b75675001d"><a href="https://webpack.js.org/plugins/" class="bookmark source"><div class="bookmark-info"><div class="bookmark-text"><div class="bookmark-title">Plugins | webpack</div><div class="bookmark-description">webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.</div></div><div class="bookmark-href"><img src="https://webpack.js.org/icon_512x512.png" class="icon bookmark-icon"/>https://webpack.js.org/plugins/</div></div><img src="https://webpack.js.org/icon-pwa-512x512.d3dae4189855b3a72ff9.png" class="bookmark-image"/></a></figure><p id="8f5beaaf-754f-4e93-a80c-832d227e1a0e" class="">你可以记住这些：</p><ol type="1" id="b34d331a-5214-45c4-a09e-883ead03119b" class="numbered-list" start="1"><li><code>html-webpack-plugin</code> 用于创建 HTML 页面并自动引入 JS 和 CSS</li></ol><ol type="1" id="e4684a8e-1d63-416f-a378-51f75eeadafa" class="numbered-list" start="2"><li><code>clean-webpack-plugin</code> 用于清理之前打包的残余文件</li></ol><ol type="1" id="5bfe81e7-5f06-4078-ab11-a5e106b27fbb" class="numbered-list" start="3"><li><code>mini-css-extract-plugin</code> 用于将 JS 中的 CSS 抽离成单独的 CSS 文件</li></ol><ol type="1" id="ee7abb90-291e-4d1d-a8ac-cfb53290e476" class="numbered-list" start="4"><li><code>SplitChunksPlugin</code> 用于代码分包（Code Split）</li></ol><ol type="1" id="ae7dc205-0603-40d3-9f46-bd082f9fcff7" class="numbered-list" start="5"><li><code>DllPlugin</code> + <code>DllReferencePlugin</code> 用于避免大依赖被频繁重新打包，大幅降低打包时间<figure id="7a60f672-94df-4768-8e27-decfac581ccd"><a href="https://segmentfault.com/a/1190000016567986" class="bookmark source"><div class="bookmark-info"><div class="bookmark-text"><div class="bookmark-title">webpack使用-详解DllPlugin</div><div class="bookmark-description">（时光飞逝，转眼又偷懒了一个多月） DLL(Dynamic Link Library)文件为动态链接库文件,在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即DLL文件，放置于系统中。当我们执行某一个程序时，相应的DLL文件就会被调用。 举个例子：很多产品都用到螺丝，但是工厂在生产不同产品时，不需要每次连带着把螺丝也生产出来，因为螺丝可以单独生产，并给多种产品使用。在这里螺丝的作用就可以理解为是dll。 通常来说，我们的代码都可以至少简单区分成 业务代码和 第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可以用到dll： 把复用性较高的第三方模块打包到动态链接库中，在不升级这些库的情况下，动态库不需要重新打包，每次构建只重新打包业务代码 。 还是上面的例子：把每次构建，当做是生产产品的过程，我们把生产螺丝的过程先提取出来，之后我们不管调整产品的功能或者设计（对应于业务代码变更）， 都不必重复生产螺丝（第三方模块不需要重复打包）；除非是 产品要使用新型号的螺丝（第三方模块需要升级） ，才需要去重新生产新的螺丝，然后接下来又可以专注于调整产品本身。 使用dll时，可以把构建过程分成dll构建过程和主构建过程（实质也就是如此），所以需要两个构建配置文件，例如叫做 webpack.config.js和 webpack.dll.config.js 。 DllPlugin是 webpack内置的插件，不需要额外安装，直接配置 webpack.dll.config.js 文件： module.exports = {= entry: { // 第三方库 react: [&#x27;react&#x27;, &#x27;react-dom&#x27;, &#x27;react-redux&#x27;] }, output: { // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称， filename: &#x27;[name].dll.js&#x27;, path: resolve(&#x27;dist/dll&#x27;), // library必须和后面dllplugin中的name一致 后面会说明 library: &#x27;[name]_dll_[hash]&#x27; }, plugins:</div></div><div class="bookmark-href"><img src="https://cdn.segmentfault.com/r-201ac6f2/favicon.ico" class="icon bookmark-icon"/>https://segmentfault.com/a/1190000016567986</div></div><img src="https://cdn.segmentfault.com/r-201ac6f2/touch-icon.png" class="bookmark-image"/></a></figure></li></ol><ol type="1" id="063446e2-2cc6-4322-b413-a9816db2006a" class="numbered-list" start="3"><li><code>eslint-webpack-plugin</code> 用于检查代码中的错误</li></ol><ol type="1" id="19211e2b-9039-4a57-a0ff-5b72ffd432e8" class="numbered-list" start="4"><li><code>DefinePlugin</code> 用于在 webpack config 里添加全局变量</li></ol><ol type="1" id="a35a676b-1841-4484-9c00-9ba78680489c" class="numbered-list" start="5"><li><code>copy-webpack-plugin</code> 用于拷贝静态文件到 dist</li></ol><h3 id="42d3c42f-b8dd-4067-b232-340c62ade09b" class="">二者的区别</h3><ul id="1aacda14-3439-43aa-bfd7-0eef17c0c629" class="bulleted-list"><li style="list-style-type:disc">loader 是文件加载器（这句废话很重要）<ul id="ab43d9fc-51e7-4913-879b-986033bd8e97" class="bulleted-list"><li style="list-style-type:circle">功能：能够对文件进行编译、优化、混淆（压缩）等，比如 babel-loader / vue-loader</li></ul><ul id="504ab5f2-4718-4745-87fb-49bfc6e38a84" class="bulleted-list"><li style="list-style-type:circle">运行时机：在创建最终产物之前运行</li></ul></li></ul><ul id="e9226655-9e14-4ebd-8ead-4bfe6c7da24c" class="bulleted-list"><li style="list-style-type:disc">plugin 是 webpack 插件（这句废话也很重要）<ul id="97ec75ba-1b83-4cc6-bfd9-d593c69f3e2d" class="bulleted-list"><li style="list-style-type:circle">功能：能实现更多功能，比如定义全局变量、Code Split、加速编译等</li></ul><ul id="74738b2d-82df-40db-97fe-66c467f5bc5c" class="bulleted-list"><li style="list-style-type:circle">运行时机：在整个打包过程（以及前后）都能运行</li></ul><p id="d3b2fd24-207d-4db7-b61c-1609a65f721c" class="">
</p></li></ul></div></article></body></html>